<template>
<div>
    <div :style="{backgroundImage:'url('+blogData.img+')'}" class="imgbox">
    </div>
    <div class="page-maxWidth">
      <div class="boxShow">
        <h2 class=" mb mt _title">{{ blogData.title }}</h2>
        <div class="f13 c8 view-tab">
          <span class="mr">{{blogData.author}}</span>
          <span> {{blogData.createTime}} </span>
        </div>
        <div class="detail">
          <mavon-editor
            previewBackground="#ffffff"
            defaultOpen="preview"
            :transition="false"
            :boxShadow="false"
            :subfield="false"
            :editable="false"
            :toolbarsFlag="false"
            v-model="blogData.content"
          />
        </div>
      </div>
    </div>
</div>
</template>
<script >
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import { blogDetail } from "@/api/index.js"
export default {
  components:{ mavonEditor },
  data() {
    return {
      blogData:{}
    };
  },
  mounted(){
    this.getDetail();
  },
  methods: {
    getDetail() {
      return new Promise((reslove, reject) => {
        let params = {
          bid:this.$route.query.bid
        }
        blogDetail(params).then(res => {
          this.blogData = res.data
          reslove(res.data);
        });
      });
    }
  }
};
</script>
<style>
.view-tab{
  padding: 0px 0px;
}
.v-note-wrapper{
  min-width: 100% !important;
  border: none !important;
}
.v-note-wrapper .v-note-panel .v-note-show .v-show-content, .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html{
  padding: 0px !important;
}
</style>
<style lang="scss" scoped>
.page-maxWidth{
   padding-left: calc((100% - 810px) / 2 + 10px);
   padding-right: calc((100% - 810px) / 2 + 10px);
   border: 1px solid #f1f1f1;
   padding-top: 50px;
}

@media screen and (max-width: 768px) {
  .page-maxWidth{
    padding-left: 10px;
    padding-right: 10px;
  }
}
.page-maxWidth{
  padding-left: calc((100% - 810px) / 2 + 10px);
  padding-right: calc((100% - 810px) / 2 + 10px);
}

@media screen and (max-width: 768px) {
  .page-maxWidth{
    padding-left: 10px;
    padding-right: 10px;
  }
}
.liuban{
  border-top: 1px solid #f1f1f1f1;
  padding-top: 20px;
  margin-top:60px;
}
.bar{
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-top: 40px;
  .icon{
    width: 25px;
    vertical-align:text-bottom;
  }
  span{
    vertical-align:baseline;
  }
}
.boxShow{
  padding: 0px 0px;
}
.detail{
  padding-bottom: 1.5rem;
}
._title {
  font-size: 38px;
  font-weight: 600;
}
.wb-main {
  font-size: 14px;
  padding: 10px;
}
.row {
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}
.imgbox{
  width: 100%;
  height: 550px;
  background-size: auto 100% ;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
  .imgbox{
    height: 220px;
  }
}

</style>
